<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加护工</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    <form @submit.prevent="addEmployee">
        姓名：<input type="text" v-model="employee.name"><br>
        性别: <input type="text" v-model="employee.gender"><br>
        图片：<input type="text'" v-model="employee.photo"><br>
        手机号: <input type="text" v-model="employee.phoneNum"><br>
        邮箱: <input type="email" v-model="employee.email"><br>
        密码: <input type="password" v-model="employee.password"><br>
        生日: <input type="text" v-model="employee.birthday"><br>
        <input type="submit" value="提交">
    </form>
    <div v-if="successMessage">{{ successMessage }}</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            employee: {
                name: "",
                gender: "",
                photo: "",
                phoneNum: "",
                email: "",
                password: "",
                birthday: ""
            },
            successMessage: ""
        },
        methods: {
            addEmployee() {
                axios.post("/employees", this.employee)
                    .then(response => {
                        const result = response.data;
                        if (result.code === 1) {
                            this.successMessage = result.msg;
                            this.employee = {
                                name: "",
                                gender: "",
                                photo: "",
                                phoneNum: "",
                                email: "",
                                password: "",
                                birthday: ""
                            };
                        } else {
                            console.log(result.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    });

</script>


</body>
</html>